import { useState, useEffect } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count++);
  };
  useEffect(() => {
    // 书写要执行的副作用（请求函数、操作DOM），会在组件渲染后执行
    //   document.title = `你点击了${count}次`;
    const timer = setInterval(() => {
      console.warn("执行副作用函数");
    }, 1000);

    // useEffect 会返回一个函数，该函数被称为清理函数（一般执行清理操作）
    // 该函数会在上一次渲染之后，执行副作用之前执行
    return () => {
      clearInterval(timer);
      console.log("清理副作用函数");
    };
  });
  return (
    <div>
      <div>你点击了{count}次</div>
      <button onClick={handleClick}>+1</button>
    </div>
  );
}
